<template>
	<view>
		<!-- 背景 -->
		<view class="bgImg" :style="{'background-image' : 'url(' + playlist.coverImgUrl+ ')'}"></view>
		<!-- 头部状态栏 -->
		<music-head class="musicHead" title="歌单" :showIcon="true" textHeadColor="#fff" className="list"></music-head>
		<!-- <uni-nav-bar title="你好"></uni-nav-bar> -->
		<view class="container" v-show="isLoading">
			<scroll-view scroll-y="true">
				<!-- 介绍页 -->
				<view class="list-head">
					<view class="img">
						<image class="list-img" :src="playlist.coverImgUrl"></image>
						<view class="iconfont icon-yousanjiao">{{playlist.playCount | formatCount}}</view>
					</view>
					<view class="info">
						<view class="info-head">{{playlist.name}}</view>
						<view class="logo">
							<image class="logo-img" :src="playlist.creator.avatarUrl"></image>
							<view>{{playlist.creator.nickname}}</view>
						</view>
						<view class="info-foot">{{playlist.description}}
							<text class="iconfont icon-xiangyoujiantou"></text>
						</view>
					</view>
				</view>
				<!-- 分享 -->
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="share">
					<text class="iconfont icon-fenxiang1"></text>分享给微信好友
				</button>
				<!-- #endif -->
				<!-- 播放列表 -->
				<view class="list-play">
					<view class="play-head">
						<text class="iconfont icon-bofang"></text>
						<text>播放全部</text>
						<text>（共{{playlist.trackCount}}首）</text>
					</view>
					<view class="song-list" v-for="(item,index) in playlist.tracks" :key="item.id"
						@click="handleToDetail(item.id)">
						<view class="number">{{index + 1}}</view>
						<view class="content">
							<view class="special app-text-ellipsis">{{item.name}}</view>
							<view class="little app-text-ellipsis">
								<!-- 阿冗-与我无关 -->
								<!-- <text v-for="(item2,index2) in item.ar" :key="item2.id">{{item2.length == index2+1 ? item2.name : item2.name + '/'}}</text>
								 - <text>{{item.al.name}}</text> -->
								<text>{{item.ar[0].name}}</text> - <text>{{item.al.name}}</text>
							</view>
						</view>
						<view class="iconfont icon-bofang play"></view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		playlistDetail
	} from '../../common/api.js'
	export default {
		data() {
			return {
				playlist: {
					coverImgUrl: '',
					creator: {
						avatarUrl: '',
						nickname: ''
					},
					tracks: [
						{
							ar:[
								{name:''}
							],
							al:{
								name:''
							}
						}
					],
					trackCount: '',
					al: {
						name: ''
					}
				},
				// 控制loading，当没有数据的时候先不显示html内容
				isLoading: false
			}
		},
		onLoad({id}) {
			// console.log(id)
			// uni的loading效果
			uni.showLoading({
				title: '加载中...'
			})
			playlistDetail(id).then((res) => {
				// console.log(res)
				this.playlist = res.data.playlist
				// 将100手歌曲id保存（vuex中），用于自动播放下一首
				this.$store.commit('INIT_TOPLISTIDARR',res.data.privileges)
				this.isLoading = true
				// 关闭loading
				uni.hideLoading()
			})
		},
		methods: {
			handleToDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-head {
		display: flex;
		justify-content: space-around;
		width: 100%;
		color: #eee;
		font-size: 34rpx;

		.img {
			width: 262rpx;
			height: 262rpx;
			position: relative;

			.list-img {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}

			view {
				position: absolute;
				top: 0;
				right: 8rpx;
				font-size: 26rpx;
				padding: 6rpx;
			}
		}

		.info {
			width: 400rpx;
			height: 262rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.info-head {
				font-size: 32rpx;
			}

			.logo {
				width: 208rpx;
				height: 52rpx;
				font-size: 26rpx;
				margin: 34rpx 0;
				display: flex;

				.logo-img {
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				view {
					line-height: 52rpx;
					color: rgba(255, 255, 255, .7);
				}
			}

			.info-foot {
				width: 100%;
				font-size: 24rpx;
				color: rgba(255, 255, 255, .5);
				height: 66rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				// 显示两行后，多余的内容用省略号代替
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text {
					font-size: 26rpx;
				}
			}
		}
	}

	.share {
		width: 334rpx;
		height: 72rpx;
		border-radius: 36rpx;
		margin: 48rpx auto;
		line-height: 72rpx;
		font-size: 28rpx;
		background-color: rgba(0, 0, 0, .1);
		color: #fff;

		text {
			margin-right: 16rpx;
			font-size: 28rpx;
		}
	}

	.list-play {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		// padding: 0 34rpx;
		box-sizing: border-box;
		border-radius: 40rpx;

		.play-head {
			width: 100%;
			height: 120rpx;
			line-height: 120rpx;
			font-size: 32rpx;
			padding: 0 34rpx;

			text:nth-child(1) {
				font-size: 42rpx;
				margin-right: 30rpx;
			}

			text:nth-child(3) {
				color: #c3c3c3;
				font-size: 28rpx;
			}
		}

		.song-list {
			width: 100%;
			height: 122rpx;
			display: flex;
			color: #c3c3c3;
			padding: 0 34rpx;
			background-color: #fff;

			.number {
				width: 42rpx;
				line-height: 120rpx;
				text-align: center;
				// margin-left: 10rpx;
				font-size: 32rpx;
			}

			.content {
				width: 512rpx;
				margin-left: 28rpx;

				.special {
					color: #000;
					font-size: 30rpx;
					margin: 30rpx 0 10rpx;
					// overflow: hidden;
					// text-overflow: ellipsis;
					// white-space: nowrap;
				}

				.little {
					font-size: 24rpx;
					// overflow: hidden;
					// text-overflow: ellipsis;
					// white-space: nowrap;
				}
			}

			.play {
				width: 100rpx;
				line-height: 120rpx;
				text-align: center;
				font-size: 52rpx;
			}
		}
	}
</style>
